<template>
  <div class="discussion_board">
    <el-divider />
    <h2>讨论区</h2>
    <!--    <el-divider />-->
    <div style="display: flex;align-items: center;margin-bottom: 10px">
      <img
          :src="user.avatar"
          style="width: 50px;height: 50px;border-radius: 30px"
          alt=""/>
      <div style="margin: 10px"></div>
      <el-input
          v-model="myDiscussion"
          :autosize="{ minRows: 2, maxRows: 8 }"
          autosize
          type="textarea"
          placeholder="评论"
      />
      <div style="margin: 10px"></div>
      <el-popconfirm
          width="220"
          confirm-button-text="确认"
          cancel-button-text="取消"
          icon-color="#626AEF"
          title="确认发布评论？"
          @confirm="publishDiscussion"
      >
        <template #reference>
          <el-button size="large" type="primary">发布</el-button>
        </template>
      </el-popconfirm>

    </div>
    <div class="discussions" v-for="discussion in discussionTable">
      <el-divider />
      <div style="display: flex">
        <img
            :src="discussion.avatar"
            style="width: 50px;height: 50px;border-radius: 30px"
        />
        <div style="display: flex;flex-direction: column;margin-left: 10px;width: 700px">
          <div style="display: flex;margin-top: 15px">
            <h4 style="margin-bottom: 0;left: 0;width: 100px">{{discussion.userName}}
              <el-tag v-if="discussion.userId==currentTeacher">教师</el-tag>
            </h4>
            <p style="white-space: pre-wrap;" v-html="discussion.content"/>
          </div>
        </div>
        <div style="right: 0">
          <el-button type="primary" text @click="openDialog(discussion)">回复</el-button>
        </div>
      </div>

      <div class="response" v-for="response in discussion.children">
        <div class="head">
          <img
              :src="response.avatar"
              style="width: 35px;height: 35px;border-radius: 30px;margin-left: 30px"
          />
          <h5 style="margin-left: 10px">{{ response.userName }}</h5>
          <h5 style="margin-left: 10px">回复</h5>
          <img
              :src="response.responseAvatar"
              style="width: 35px;height: 35px;border-radius: 30px;margin-left: 10px"
          />
          <h5 style="margin-left: 10px">{{ response.responseUserName }}</h5>
          <div style="margin-left: 75px;max-width: 700px">
            {{response.content}}
          </div>
          <div style="right: 0">
            <el-button type="success" text @click="openDialog(response)">回复</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="replyDialog">
      <el-dialog
          v-model="dialogVisible"
          title="回复"
          width="40%">
        <el-input
            v-model="replyDiscussion.replyContent"
            :autosize="{ minRows: 6, maxRows: 8 }"
            autosize
            type="textarea"
            :placeholder="replyDiscussion.ResponseObject.userName"/>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="publishReply">
          回复
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import request from "../../../front_admin/src/utils/request";
import {useRouter} from "vue-router";
import Cookies from "js-cookie";
import {ElMessage} from "element-plus";

const router = useRouter();

const currentTeacher = ref(19)

const discussionTable = ref([])

const myDiscussion=ref('');
const replyDiscussion=reactive({
  ResponseObject:{},
  replyContent:'',
});

const dialogVisible = ref(false)

const props=defineProps({
  currentPosition: {
    type: Object,
    default: {
      discussionType:1,
      positionId:8,
    }
  },
})

watch(
    ()=>props.currentPosition,
    (newVal,oldVal) => {
      console.log(newVal)
      //监听值改变之后，调用接口

      getDiscussion(newVal);
    }
)

const user = ref({});
onMounted(()=>{
  // debugger;
  user.value = JSON.parse(Cookies.get("user"));
  getDiscussion(props.currentPosition);
})

const openDialog = (discussion) =>{
  replyDiscussion.ResponseObject = discussion;
  console.log("这边回复的内偶给你哦收获都是",replyDiscussion.ResponseObject)
  dialogVisible.value = true;
}

const publishReply = () =>{
  if(replyDiscussion.replyContent.trim()===''){
    ElMessage.error('请输入内容！')
    dialogVisible.value = false;
  }
  else {
    let form = {};
    form.userId = user.value.id;
    form.responseId = replyDiscussion.ResponseObject.userId;
    form.content = replyDiscussion.replyContent;
    form.discussionType = props.currentPosition.discussionType;
    form.positionId = props.currentPosition.positionId;
    if(replyDiscussion.ResponseObject.parentId===0){
      form.parentId = replyDiscussion.ResponseObject.discussionId;
    }
    else {
      form.parentId = replyDiscussion.ResponseObject.parentId
    }
    console.log("回复的用户id是什么第一处",replyDiscussion.ResponseObject.userId);
    addDiscussion(form);
    dialogVisible.value = false;
  }
}

const publishDiscussion = () =>{
  if(myDiscussion.value.trim()===''){
    ElMessage.error('请输入内容！')
  }
  else {
    // console.log(myDiscussion.value);
    let form = {};
    form.userId = user.value.id;
    form.responsedId = '';
    form.parentId=0;
    form.content = myDiscussion.value;
    form.discussionType = props.currentPosition.discussionType;
    form.positionId = props.currentPosition.positionId;
    // console.log(form);
    console.log("回复的用户id是什么第二处",replyDiscussion.ResponseObject.userId);
    addDiscussion(form);
  }
}

const getDiscussion = (curPosition) =>{
  // debugger
  request.get("/discussion/getTree",{
    params:{
      discussionType:curPosition.discussionType,
      positionId:curPosition.positionId
    }
  }).then((res)=>{
    console.log(res)
    discussionTable.value = res.data;
  })
}

const addDiscussion = (form) =>{
  request.post("/discussion/addDiscussion",form).then((res)=>{
    if(res.code==='200'){
      ElMessage.success('保存成功！');
      myDiscussion.value = '';
      replyDiscussion.replyContent='';
      // console.log("usieohoono内各那还是",user)
      //重置分享资源
      // resetResource();
      //刷新评论区
      getDiscussion(props.currentPosition);
    }
    else
      ElMessage.error('操作失败！')
  })
}
</script>

<style scoped lang="less">
.discussion_board{
  width: 80vw;
  height: auto;
  .discussions{
    display: flex;
    flex-direction: column;
    //margin-top: 10px;
    .response{
      display: flex;
      flex-direction: column;
      .head{
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>